<template>
  <!--  搜索栏 -->
  <div class="app-container">
    <basic-search-form
      ref="vBasicSearchForm"
      style="margin-bottom: 8px"
      :columns="columns"
      inline
      size="small"
      @search="serach"
    >
      <!--   性别下拉列表   -->
      <template #sex="{ formdata }">
        <el-select
          v-model="formdata.sex"
          filterable
          placeholder="请选择"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in sexList"
            :key="item.code"
            :label="item.info"
            :value="item.code"
          />
        </el-select>
      </template>
      <!--   学历下拉列表   -->
      <template #education="{ formdata }">
        <el-select
          v-model="formdata.education"
          filterable
          placeholder="请选择"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in educationList"
            :key="item.code"
            :label="item.info"
            :value="item.info"
          />
        </el-select>
      </template>
      <!--   证书资格类别   -->
      <template #credentialsType="{ formdata }">
        <el-select
          v-model="formdata.credentialsType"
          filterable
          placeholder="请选择"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in credentialsTypeList"
            :key="item.code"
            :label="item.info"
            :value="item.code"
          />
        </el-select>
      </template>
      <!--   证书等级下拉列表   -->
      <template #credentialsLevel="{ formdata }">
        <el-select
          v-model="formdata.credentialsLevel"
          placeholder="请选择"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in credentialsLevelList"
            :key="item.code"
            :label="item.info"
            :value="item.code"
          />
        </el-select>
      </template>
      <!--   创建方式下拉列表   -->
      <template #createType="{ formdata }">
        <el-select v-model="formdata.createType" placeholder="请选择" clearable style="width: 100%">
          <el-option
            v-for="item in createTypeList"
            :key="item.code"
            :label="item.info"
            :value="item.code"
          />
        </el-select>
      </template>
    </basic-search-form>
    <!-- 表格 -->
    <basic-table
      ref="vBasicTable"
      :api="getPageList"
      :immediate-fetch="false"
      :before-fetch="beforeFetch"
      :table-schema="tableSchema"
      :actions="tableActions"
      :table-prop="tableProp"
      :table-event="tableEvent"
      :row-info="{
        rowKey: 'data',
      }"
    >
      <template #crewInfo="{ row }">
        <el-row>
          <el-col :span="8">
            <el-avatar v-if="row.avatar" :src="row.avatar" />
            <el-avatar v-else>{{ row.nickName }}</el-avatar>
          </el-col>
          <el-col :span="16">
            <el-row>
              <el-col>{{ row.nickName }}</el-col>
            </el-row>
            <el-row>
              <el-col>{{ row.mobile }}</el-col>
            </el-row>
          </el-col>
        </el-row>
      </template>
      <template #stateStr="{ row }">
        <div style="text-align: center">
          <!--     订单状态 1待审核/2进行中/3已暂停/4已结束/5已取消     -->
          <el-tag v-if="row.state === 1" type="success">{{ row.stateStr }}</el-tag>
          <el-tag v-if="row.state === 2">{{ row.stateStr }}</el-tag>
          <el-tag v-if="row.state === 3" type="warning">{{ row.stateStr }} </el-tag>
          <el-tag v-if="row.state === 4" style="color: #dee2e6" color="#6d6d72">
            {{ row.stateStr }}
          </el-tag>
          <el-tag v-if="row.state === 5" type="info"> {{ row.stateStr }} </el-tag>
        </div>
      </template>
      <!-- 表格上方按钮-->
      <template #tableHead="">
        <div>
          <el-tabs v-model="queryParams.state" type="card" @tab-click="tabClick">
            <el-tab-pane label="全部" name="0"></el-tab-pane>
            <el-tab-pane label="待审核" name="1"></el-tab-pane>
            <el-tab-pane label="进行中" name="2"></el-tab-pane>
            <el-tab-pane label="已暂停" name="3"></el-tab-pane>
            <el-tab-pane label="已结束" name="4"></el-tab-pane>
            <el-tab-pane label="已取消" name="5"></el-tab-pane>
          </el-tabs>
        </div>
        <div style="height: 32px">
          <el-button size="mini" type="primary" @click="handleAdd">发布求职订单</el-button>
          <el-button size="mini" @click="batchUpdateState(3)">批量暂停</el-button>
          <el-button size="mini" @click="batchUpdateState(2)">批量恢复</el-button>
          <el-button size="mini" @click="batchUpdateState(4)">批量结束</el-button>
          <el-button size="mini" @click="handleExport">导出EXCEL</el-button>
        </div>
      </template>
      <template #action="{ row }">
        <el-button size="mini" type="text" @click="handleDetail(row.id)">查看详情</el-button>
        <el-button size="mini" type="text" @click="handleUpdate(row.id)">编辑</el-button>
        <el-button size="mini" type="text" style="color: #fec171" @click="batchUpdateState(3, row)">
          暂停
        </el-button>
        <el-button size="mini" type="text" style="color: #fec171" @click="batchUpdateState(2, row)">
          恢复
        </el-button>
        <el-button size="mini" type="text" style="color: #ff4949" @click="batchUpdateState(4, row)">
          结束
        </el-button>
      </template>
    </basic-table>
  </div>
</template>

<script>
import { searchColumns, tableActions, tableSchema } from '@/views/orders/staff/list/modal.data';
import dayjs from 'dayjs';
import { download } from '@/utils/request';
import { getPageList, batchUpdateState } from '@/api/orders/orderStaff';
import {
  credentialsLevelEnum,
  educationEnum,
  credentialsTypeEnum,
  createTypeEnum,
} from '@/api/common';

export default {
  data() {
    return {
      columns: searchColumns(this),
      tableSchema: tableSchema,
      tableActions: tableActions(),
      tableProp: {},
      tableEvent: {
        'selection-change': (selection) => {
          this.selectedIds = selection.map((item) => item.id);
        },
      },
      queryParams: {},
      sexList: [
        { code: 0, info: '男' },
        { code: 1, info: '女' },
        { code: 2, info: '其他' },
      ],
      educationList: [],
      credentialsTypeList: [],
      credentialsLevelList: [],
      createTypeList: [],
      selectedIds: [],
    };
  },
  mounted() {
    this.getCredentialsLevelList();
    this.getEducationLevelList();
    this.getCredentialsTypeList();
    this.getCreateTypeList();
    this.$refs.vBasicSearchForm.search();
  },
  methods: {
    getPageList,
    serach(form) {
      this.queryParams = { ...form };
      this.$refs.vBasicTable.fetch();
    },
    beforeFetch() {
      let query = {
        ...this.queryParams,
        deadlineStart:
          (this.queryParams.deadline?.[0] &&
            dayjs(this.queryParams.deadline[0]).format('YYYY-MM-DD')) ||
          null,
        deadlineEnd:
          (this.queryParams.deadline?.[0] &&
            dayjs(this.queryParams.deadline[1]).format('YYYY-MM-DD')) ||
          null,
        createTimeStart:
          (this.queryParams.createTime?.[0] &&
            dayjs(this.queryParams.createTime[0]).format('YYYY-MM-DD')) ||
          null,
        createTimeEnd:
          (this.queryParams.createTime?.[0] &&
            dayjs(this.queryParams.createTime[1]).format('YYYY-MM-DD')) ||
          null,
      };
      delete query.date;
      return query;
    },
    //点击tabbar切换状态
    tabClick(tab) {
      if (tab.name === '0') {
        this.queryParams.state = null;
      }
      this.$refs.vBasicTable.fetch();
    },
    /**
     * 详情
     * @param id
     */
    handleDetail(id) {
      this.$router.push({ name: 'OrderStaffDetail', query: { id: id } });
    },
    /**
     * 新增
     */
    handleAdd() {
      this.$router.push({ name: 'OrderStaffSave' });
    },
    /**
     * 编辑
     * @param id
     */
    handleUpdate(id) {
      this.$router.push({ name: 'OrderStaffSave', query: { id: id } });
    },
    handleUpdateState(id, state) {
      batchUpdateState(id, state).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.msg);
          this.$refs.vBasicTable.fetch();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    /**
     * 批量更新状态
     * @param state
     * @param row
     */
    batchUpdateState(state, row) {
      if (!row && this.selectedIds.length === 0) {
        this.$message.error('请先选择一个或多个订单');
        return;
      }
      let msg = '';
      if (row) {
        msg = '订单：' + row.orderNo + '，确定将订单';
        this.selectedIds = [row.id];
      } else {
        msg = '已选' + this.selectedIds.length + '个订单，确定将订单';
      }
      let title = '';
      if (state === 3) {
        msg = msg + '暂停？暂停后订单将不展示';
        title = '暂停';
      } else if (state === 2) {
        msg = msg + '恢复？恢复后订单将展示';
        title = '恢复';
      } else if (state === 4) {
        msg = msg + '结束？结束后订单将不展示';
        title = '结束';
      }
      this.$confirm(msg, title, {
        confirmButtonText: title,
      })
        .then(async () => {
          const data = await batchUpdateState(this.selectedIds.join(','), state);
          if (data.code === 200) {
            this.$message.success(data.msg);
            this.selectedIds = [];
            this.$refs.vBasicTable.fetch();
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch(() => {});
    },

    /**
     * 获取证书等级下拉列表
     */
    getCredentialsLevelList() {
      credentialsLevelEnum().then((res) => {
        this.credentialsLevelList = res.data;
      });
    },
    /**
     * 获取学历下拉列表
     */
    getEducationLevelList() {
      educationEnum().then((res) => {
        this.educationList = res.data;
      });
    },
    /**
     * 获取归属运营商下拉列表
     */
    getCredentialsTypeList() {
      credentialsTypeEnum().then((res) => {
        this.credentialsTypeList = res.data;
      });
    },
    /**
     * 获取创建方式下拉列表
     */
    getCreateTypeList() {
      createTypeEnum().then((res) => {
        this.createTypeList = res.data;
      });
    },
    /**
     * 导出
     */
    handleExport() {
      download(
        '/orderStaff/export',
        { ...this.queryParams },
        `求职订单列表_${new Date().getTime()}.xlsx`,
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f1f1f1;
}
</style>
